import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { Flower } from '../flower';
import { BComponent } from './b.component';
import { CComponent } from './c.component';

@Component({
  selector: 'app-a',
  standalone: true,
  providers: [
    {
      provide: Flower,
      useValue: new Flower('🌹'),
    },
  ],
  viewProviders: [
    {
      provide: Flower,
      useValue: new Flower('🌷'),
    },
  ],
  template: `
    <app-b>
      <app-c [prefix]="projectionPrefix" />
    </app-b>
    <app-c [prefix]="prefix" />
  `,
  imports: [CommonModule, BComponent, CComponent],
  styles: `
    :host {
      @apply text-lg;
    }
  `,
})
export class AComponent {
  prefix = "A's view";
  projectionPrefix = "A's view, projected to B";
}

export default AComponent;
